<template>
  <div>
    <div class="container" v-if="lovecar">
      <!-- 头部 -->
      <div class="header">
        <van-swipe @change="onChange" height="220">
          <van-swipe-item v-for="item in lovecar.banner" :key="item.carid">
            <img :src="item" alt="">
          </van-swipe-item>

        </van-swipe>
        <p @click="add" class="arrow">&lt;</p>


      </div>
      <!-- 汽车描述 -->
      <div class="cartitle">
        <div class="cartitles">
          <div class="title">
            <h1>{{ lovecar.carname }}</h1>
            <span></span>

          </div>
          <div class="price">
            <p>￥<strong>{{lovecar.manys}}</strong>/天</p>
            <span>原价<del>{{lovecar.many}}</del></span>
          </div>
          <div class="label">
            <ul>
              <li><img src="../assets/img/xinche_baozheng_v643@3x.png" alt=""></li>
              <li><img src="../assets/img/xinyong_shuangmian_v643@3x.png" alt=""></li>
              <li><img src="../assets/img/anxin_baozhang_v643@3x.png" alt=""></li>
              <li><img src="../assets/img/shoucang_zuiduo_v643@3x.png" alt=""></li>
            </ul>
            <p>&gt;</p>
          </div>
          <div class="brand">
            <span>{{ lovecar.plate }}</span>
            <span>日均限200km</span>
            <span>{{ lovecar.frequency }}</span>
          </div>
          <div class="address">
            <p>上海市静安区柳营路768弄(近普善路)</p>
            <span>7.9km ></span>
          </div>
        </div>
      </div>
      

      <van-cell title="选择租用时间" :value="date" @click="show = true" />
      <van-calendar v-model="show" type="range" @confirm="onConfirm" />
      <!-- 用车限制 -->
      <div class="limit">
        <div class="limits">
          <div class="title">
            <p>用车限制</p>
            <span>&gt;</span>
          </div>
          <div class="scroll">
            <div class="item">
              <p class="active">2天起租</p>
              <p>元旦租期</p>
            </div>
            <div class="item">
              <p>2小时</p>
              <p>提前预约</p>
            </div>
            <div class="item">
              <p>200km</p>
              <p>日均限行</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 平台保障 -->
      <div class="guarantee">
        <div class="guarantees">
          <div class="title">
            <p>平台保障</p>
            <span>193元/天 ></span>
          </div>
          <div class="content">
            <p><img src="../assets/img/gou.png" alt=""> 255万全方位保障</p>
            <p><img src="../assets/img/gou.png" alt=""> 7x24h道路救援</p>
            <p><img src="../assets/img/gou.png" alt=""> 一键理赔</p>
          </div>
        </div>
      </div>
      <!-- 车辆配置 -->
      <div class="disposition">
        <div class="dispositions">
          <div class="title">
            <p>车辆配置</p>
            <span>&gt;</span>
          </div>
          <div class="scroll">
            <div class="item">
              <p class="active">倒车影像</p>
              <p><img src="../assets/img/daocheyingxiang_anhei.png" alt=""></p>
            </div>
            <div class="item">
              <p>敞篷</p>
              <p><img src="../assets/img/tianchuang_anhei.png" alt=""></p>
            </div>
            <div class="item">
              <p>导航仪</p>
              <p><img src="../assets/img/daohangyi_anhei.png" alt=""></p>
            </div>
          </div>
        </div>
      </div>
      <!-- 车况检测 -->
      <div class="detect">
        <div class="detects">
          <p>车况检测</p>
          <span>近期该车辆未更新检测信息</span>
        </div>
      </div>
      <!-- 车主说 -->
      <div class="owners">
        <div class="owneres">
          <p class="title">车主说</p>
          <div class="logo">
            <img src="../assets/img/user_08.png" alt="">
            <p>Mr.刘</p>
          </div>
          <span>新买的小红红，有要体验的小伙伴可以自行下单哦</span>
        </div>
      </div>
      <!-- 用车备注 -->
      <div class="remark">
        <div class="remarks">
          <p>用车备注</p>
          <span>请勿在车内抽烟</span>
        </div>
      </div>
      <!-- 客服中心 -->
      <div class="customer">
        <div class="customers">
          <div class="content">
            <p>客服中心</p>
            <span>有问题点这里 ></span>
          </div>
        </div>
      </div>
      <!-- 页脚功能 -->
      <div class="page-footer">
        <div class="footers">
          <div class="content">
            <div class="text" @click="gostore">
              <img :src="flag ? '../assets/img/下载 (7).png' : '../assets/img/下载 (1).png'" alt="">
              <p>{{ flag ? '已' : '' }}收藏</p>
            </div>


            <router-link tag="button" :to="'/rent?id='+lovecar.carid">立即租用</router-link>


          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getLoveCar } from '@/api/lovecar';
import Swiper from "swiper";
export default {
  data() {
    return {
      indexSwiper: 0,
      lovecar: null,
      flag: false,
      shoucangLists: [],


      date: '',
      show: false,

    }
  },
  methods: {
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      const [start, end] = date;
      this.show = false;
      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
    },
    //收藏完显示在收藏页面
    getLoveCarFun() {
      getLoveCar({ id: this.$route.query.id }).then(data => {
        let index = data.lovecar.findIndex(item => item.carid == this.$route.query.id)
        this.lovecar = data.lovecar[index];
        console.log(this.lovecar);
        let num = 0;
        this.shoucangLists.forEach(item => {
          if (item.carid == this.lovecar.carid) {
            num++
          } else {
            return num
          }
        })
        if (num != 0) {
          this.flag = true
        }
      })
    },
    showPopup() {
      this.show = true;
    },
    add() {
      this.$router.go(-1)
    },

    //收藏
    gostore() {

      if (this.flag) {
        this.flag = false
        window.localStorage.removeItem("shoucang")
      } else {
        this.flag = true

        let num = 0;

        this.shoucangLists.forEach(item => {
          // console.log(item.carid);
          if (item.carid == this.lovecar.carid) {
            num++
          } else {
            return num
          }
        })
        if (num == 0) {
          this.shoucangLists.push(this.lovecar)

          window.localStorage.setItem("shoucang", JSON.stringify(this.shoucangLists));
        }
      }

    },

    onChange(index) {
      this.indexSwiper = index;
    }

  },
  //数据存到localStorage
  created() {
    if (localStorage.shoucang) {
      this.shoucangLists = JSON.parse(localStorage.getItem("shoucang"))
    }
    if ("id" in this.$route.query) {
      this.getLoveCarFun();
    }



  },
  updated() {
    new Swiper(".swiper-selectedSong", {
      slidesPerView: "auto",
      spaceBetween: 12,
      observer: true,
      observeParents: true, //自动初始化父节点swiper对象
    });
  },
  
}
</script>

<style lang="scss">
/* 头部 */
.header {
  width: 100%;
  height: 220px;

  position: relative;

  img {
    width: 100%;
    height: 100%;
    // background-position: 50%;
    //   background-size: cover;
  }

  .arrow {
    font-size: 20px;
    color: #fff;
    font-weight: 600;
    font-family: "仿宋";
    position: absolute;
    top: 20px;
    left: 22px;
  }

  ul {
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -35px;

    li {
      width: 5px;
      height: 5px;
      border: 1px solid #fff;
      border-radius: 50%;
      float: left;
      margin-left: 5px;
    }

    .active {
      background-color: #0ab084;
    }
  }
}

/* 汽车描述 */
.cartitle {
  width: 100%;

  .cartitles {
    width: 90%;
    margin: 0 auto;
    height: 100%;
    border-bottom: 2px solid #f5f5f5;
    display: flex;
    flex-direction: column;

    .title {
      display: flex;
      font-size: 10px;
      margin-top: 20px;

      span {
        width: 17px;
        height: 17px;
        background: url("../assets/img/zi.png");
        background-size: 100% 100%;
        margin-top: 4px;
        margin-left: 5px;
      }
    }

    .price {
      display: flex;
      align-items: center;
      font-size: 12px;
      margin-top: 10px;

      p {
        color: #f56e59;

        &>strong {
          font-size: 17px;
        }
      }

      span {
        margin-left: 5px;
        color: #bfbfbf;
        margin-top: 3px;
      }
    }

    .label {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #d6d6d6;
      margin-top: 10px;

      ul {
        display: flex;

        li {
          width: 50px;
          height: 18px;
          margin-right: 5px;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .brand {
      display: flex;
      font-size: 13px;
      margin-top: 23px;

      span {
        margin-right: 12px;
        color: #909090;
      }
    }

    .address {
      display: flex;
      font-size: 13px;
      justify-content: space-between;
      color: #909090;
      margin-top: 18px;
      margin-bottom: 18px;
    }
  }
}

/* 日期 */
.time {
  width: 100%;

  .times {
    width: 90%;
    margin: 0 auto;
    border-bottom: 2px solid #f5f5f5;

    .title {
      margin-top: 18px;
      font-size: 16px;
    }

    .date {
      margin-top: 15px;
      display: flex;
      justify-content: space-around;

      .weeks {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 12px;

        em {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background-color: #f5f5f5;
          margin-top: 15px;
          margin-bottom: 10px;
          text-align: center;
          line-height: 40px;
          font-size: 14px;
          font-style: normal;
        }

        .active {
          color: #11d68c;
        }

        span {
          color: #9e9e9e;
        }
      }
    }

    .all {
      display: flex;
      justify-content: flex-end;
      margin-top: 18px;
      margin-bottom: 18px;

      p {
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #717171;
        margin-left: 15px;

        i {
          display: block;
          width: 15px;
          height: 15px;
          background-color: #dddddd;
          border-radius: 50%;
          margin-right: 5px;
        }

        .imgs {
          width: 15px;
          height: 15px;
          display: block;
          background: url("../assets/img/yuan.png");
          background-size: 100% 100%;
        }
      }
    }
  }
}

/* 用车限制 */
.limit {
  width: 100%;

  .limits {
    width: 90%;
    margin: 0 auto;
    border-bottom: 2px solid #f5f5f5;

    .title {
      display: flex;
      justify-content: space-between;
      margin-top: 18px;

      span {
        color: #cecece;
      }
    }

    .scroll {
      display: flex;
      margin-top: 15px;

      .item {
        width: 85px;
        height: 85px;
        border-radius: 3px;
        box-shadow: 0 0 10px #eee;
        margin-right: 10px;
        font-size: 11px;
        text-align: center;
        margin-bottom: 14px;

        p {
          &:nth-child(1) {
            margin-top: 25px;
          }
        }

        .active {
          color: #11d68c;
        }
      }
    }
  }
}

/* 平台保障 */
.guarantee {
  width: 100%;

  .guarantees {
    width: 90%;
    margin: 0 auto;
    border-bottom: 2px solid #f5f5f5;

    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 18px;

      span {
        font-size: 13px;
      }
    }

    .content {
      display: flex;
      justify-content: space-between;
      margin-top: 18px;
      font-size: 12px;
      margin-bottom: 18px;

      p {
        display: flex;

        &>img {
          width: 12px;
          height: 12px;
          margin-top: 2px;
          margin-right: 5px;
        }
      }
    }
  }
}

/* 车辆配置 */
.disposition {
  width: 100%;

  .dispositions {
    width: 90%;
    margin: 0 auto;
    border-bottom: 2px solid #f5f5f5;

    .title {
      display: flex;
      justify-content: space-between;
      margin-top: 18px;

      span {
        color: #cecece;
      }
    }

    .scroll {
      display: flex;
      margin-top: 15px;

      .item {
        width: 85px;
        height: 85px;
        border-radius: 3px;
        box-shadow: 0 0 10px #eee;
        margin-right: 10px;
        font-size: 11px;
        text-align: center;
        margin-bottom: 14px;

        p {
          &:nth-child(1) {
            margin-top: 25px;
          }

          &>img {
            width: 25px;
            height: 25px;
            margin: 0 auto;
          }
        }
      }
    }
  }
}

/* 车况检测 */
.detect {
  width: 100%;

  .detects {
    width: 90%;
    margin: 0 auto;
    border-bottom: 2px solid #f5f5f5;

    p {
      margin-top: 18px;
    }

    span {
      font-size: 12px;
      display: block;
      margin-bottom: 18px;
      margin-top: 8px;
    }
  }
}

/* 车主说 */
.owners {
  width: 100%;
}

.owneres {
  width: 90%;
  margin: 0 auto;
  border-bottom: 2px solid #f5f5f5;

  .title {
    margin-top: 18px;
  }

  .logo {
    display: flex;
    margin-top: 15px;
    align-items: center;

    img {
      width: 45px;
      height: 45px;
      margin-right: 10px;
    }
  }

  span {
    display: block;
    font-size: 14px;
    margin-top: 14px;
    margin-bottom: 18px;
    color: #6a6a6a;
  }
}

/* 用车备注 */
.remark {
  width: 100%;

  .remarks {
    width: 90%;
    margin: 0 auto;
    border-bottom: 2px solid #f5f5f5;

    p {
      margin-top: 18px;
    }

    span {
      font-size: 12px;
      display: block;
      margin-bottom: 18px;
      margin-top: 8px;
    }
  }
}

/* 客服中心 */
.customer {
  width: 100%;

  .customers {
    width: 90%;
    margin: 0 auto;

    .content {
      display: flex;
      justify-content: space-between;
      margin-top: 18px;

      span {
        color: #11d68c;
        font-size: 13px;
        margin-top: 2px;
        padding-bottom: 110px;
      }
    }
  }
}

/* 页脚功能 */
.page-footer {
  width: 100%;
  height: 75px;
  margin-top: 50px;
  position: fixed;
  background-color: #fff;
  bottom: 0;
}

.footers {
  width: 90%;
  margin: 0 auto;

  .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;

    .text {
      img {
        width: 37px;
        height: 33px;
      }

      p {
        font-size: 11px;
        text-align: center;
        margin-top: -5px;
      }
    }

    button {
      width: 265px;
      height: 45px;
      background-color: #04d093;
      color: #fff;
      font-size: 15px;
      text-align: center;
      line-height: 45px;
      border-radius: 20px;
      border: none;
    }
  }
}
</style>